<template>
	<view>
		<checkbox-group @change="itemChange">
			<view class="item" v-for="(item, index) in goods" :key="item.id">
				<checkbox :value="item.id" :checked="item.checked"></checkbox>
				<text class="title">{{ item.name }}</text>
				<text>{{ item.price }}</text>
				<text class="del" @click="remove(index)">删除</text>
			</view>
		</checkbox-group>
		<view class="">
			{{ total }}
		</view>
		<view class="">{{ goods }}</view>
		<view class="">{{ totalPrice }}</view>
		<view class="out">
			<input type="text" @blur="isActive = false" @focus="isActive = true"
				@input="(e) => (iptValue = e.detail.value)" :value="iptValue" @confirm="onConfirm" />
			<image src="../../static/logo.png" mode="" class="pic" :class="isActive ? 'active' : ''"></image>
			<view class="">
				{{ iptValue }}
			</view>
			<input type="text" @blur="isActive = false" @focus="isActive = true" v-model="iptValue" />
			<image src="../../static/logo.png" mode="" class="pic" :class="isActive ? 'active' : ''"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	const goods = ref([{
			id: "11",
			name: "小米",
			price: 999,
			checked: false,
		},
		{
			id: "22",
			name: "华为",
			price: 999,
			checked: false,
		},
		{
			id: "33",
			name: "oppo",
			price: 999,
			checked: false,
		},
		{
			id: "44",
			name: "vivo",
			price: 999,
			checked: false,
		},
	]);

	function remove(index) {
		goods.value.splice(index, 1);
	}

	const iptValue = ref("");
	const isActive = ref(false);

	function onConfirm(e) {
		console.log(e);
	}

	function itemChange(e) {
		console.log(e);
		total.value = e.detail.value;
		goods.value.forEach((item) => {
			item.checked = total.value.includes(item.id);
		});
	}
	const total = ref([]);
	const totalPrice = computed(() =>
		goods.value
		.filter((item) => item.checked)
		.reduce((prev, curr) => prev + curr.price, 0)
	);
</script>

<style lang="scss" scoped>
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative;

		input {
			border: 1px solid #ccc;
			height: 40px;
			position: relative;
			z-index: 2;
			background: #fff;
		}

		.pic {
			width: 24px;
			height: 24px;
			z-index: 1;
			position: absolute;
			top: 0;
			left: calc(50% - 12px);
			transition: top 0.3s;
		}

		.pic.active {
			top: -24px;
		}
	}

	.item text {
		padding: 20px;
	}
</style>